import * as echarts from 'echarts'
import { ref } from 'vue'

export default function useConfig() {

    const chartDom1 = ref(null)
    const chartDom2 = ref(null)
    const chartDom3 = ref(null)
    const chartDom4 = ref(null)
    const chartDom5 = ref(null)
    const chartDom6 = ref(null)
    const chartDom7 = ref(null)

    // 图表无数据时
    const noData = [{
        value: 0,
        itemStyle: {
            color: 'rgba(0,0,0,0)' // 透明色
        },
        emphasis: {
            itemStyle: {
                color: 'rgba(0,0,0,0)'
            }
        },
        label: {
            show: true,
            position: 'center',
            formatter: '暂无数据', // 文本内容
            fontSize: 14,
            fontWeight: 'bold'
        }
    }]

    //重复率
    const init1 = (params) => {



        let filteredData = params.values
            .map((value, index) => ({ name: params.names[index], value }))
            .filter(item => item.value !== "未知");

        // 分离 names 和 values
        let filteredNames = filteredData.map(item => item.name);
        let filteredValues = filteredData.map(item => parseFloat(item.value));



        const myChart = echarts.init(chartDom1.value)
        myChart.setOption({
            title: {
                text: `重复率`,
                left: 'center',
                top: 5,
                textStyle: {
                    fontSize: 16 // 标题字体大小
                }
            },
            tooltip: {
                trigger: 'item'
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    rotate: 45, // 旋转标签
                    interval: 0 // 显示所有标签
                },
                data: filteredNames
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} %'
                }
            },
            series: [{
                data: filteredValues,
                type: 'bar',
            }]
        })
    }

    // 法人准确率
    const init2 = (params) => {
        const myChart = echarts.init(chartDom2.value)
        myChart.setOption({
            title: {
                text: '法人准确率',
                left: 'center',
                top: 5,
                textStyle: {
                    fontSize: 16 // 标题字体大小
                }
            },
            series: [
                {
                    type: 'gauge',
                    radius: '50%',
                    center: ['50%', '72%'],
                    startAngle: 180, // 仪表盘显示弧度
                    endAngle: 0, // 弧度
                    min: 0,
                    max: 100,
                    splitNumber: 10, // 将分成10等分
                    itemStyle: { color: '#FFAB91' },
                    progress: {
                        show: true,
                        width: 10
                    },
                    pointer: { show: false }, // 指针
                    axisLine: {
                        lineStyle: {
                            width: 10
                        }
                    },
                    axisTick: {
                        distance: -25,
                        splitNumber: 10, // 将分成10等分
                        lineStyle: {
                            width: 1, // 仪表盘边框宽度
                            color: '#999'
                        }
                    },
                    splitLine: {
                        distance: -35, // 设置刻度线与刻度标签的距离
                        length: 14,
                        lineStyle: {
                            width: 2
                        }
                    },
                    // 刻度线
                    axisLabel: {
                        distance: -20,
                        color: '#999',
                        fontSize: 12
                    },
                    anchor: { show: false },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '-25%'],
                        fontSize: 20,
                        fontWeight: 'bolder',
                        formatter: '{value}%',
                        color: 'inherit'
                    },
                    // data: [{ value: 30 }] // 值
                    data: [{ value: params }]
                },
                {
                    type: 'gauge',
                    radius: '50%',
                    center: ['50%', '72%'],
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    itemStyle: { color: '#FD7347' },
                    progress: {
                        show: true,
                        width: 5
                    },
                    pointer: { show: false },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    axisLabel: { show: false },
                    detail: { show: false },
                    // data: [{ value: 30 }] // 值
                    data: [{ value: params }]
                }
            ]
        })
    }

    // 年限分布占比
    const init3 = (params) => {
        const myChart = echarts.init(chartDom3.value)
        myChart.setOption({
            title: {
                text: '年限分布占比',
                left: 'center',
                top: 5,
                textStyle: {
                    fontSize: 16 // 标题字体大小
                }
            },
            color: ['#25d096'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: params.names
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: params.quantities,
                    // type: 'bar',
                    type: 'line',
                    barWidth: '10%',
                    label: {
                        show: true,
                        position: 'top',
                        formatter(e) {
                            return `${e.data}(${params.percentages[e.dataIndex]}%)`
                        }
                    }
                }
            ]
        })
    }

    // 行业分布
    const init4 = (params) => {
        // 1、组装数据
        let arr = []
        if (params.names?.length > 0) {
            params.names.map((item, index) => {
                arr.push({
                    ranking: index,
                    station: `${item}  ${params.quantities[index]}  占比(${params.percentages[index]}%）`,
                    value: params.quantities[index]
                })
            })
        }
        var datas = arr
        // console.log('生成数据', arr)

        // mock 数据
        // var datas = [
        //     { ranking: 1, station: '1111菱威有限公司', value: 16.74 },
        //     { ranking: 2, station: '瑞缘诚有限公司', value: 14.97 },
        //     { ranking: 3, station: '启蒙有限公司', value: 13.03 },
        //     { ranking: 4, station: '盛唐艺有限公司', value: 12.48 },
        //     { ranking: 5, station: '嘉宏有限公司', value: 11.2 },
        //     { ranking: 6, station: '爱赛特有限公司', value: 10.0 },
        //     { ranking: 7, station: '浩威有限公司', value: 8.2 },
        //     { ranking: 8, station: '美威有限公司', value: 7.2 },
        //     { ranking: 9, station: '安图山地有限公司', value: 6.2 },
        // ]
        // 2、配置
        var attackSourcesColor1 = ['#FF557F', '#FFAA00', '#5470C6', '#1E9FFF', '#E02020', '#fecd5d']
        var attackSourcesColor = [
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: 'rgba(255,85,127,1)' },
                { offset: 1, color: 'rgba(255,85,127,1)' }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: 'rgba(255,170,0,1)' },
                { offset: 1, color: 'rgba(255,170,0,1)' }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: 'rgba(84,112,198,1)' },
                { offset: 1, color: 'rgba(84,112,198,1)' }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: 'rgba(30,159,255,.82)' },
                { offset: 1, color: 'rgba(30,159,255,.82)' }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: '#E02020' },
                { offset: 1, color: '#E02020' }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: '#fecd5d' },
                { offset: 1, color: '#fecd5d' }
            ])
        ]

        function dataFormat(data) {
            var arr = []
            data.forEach(function (item, i) {
                let itemStyle = {
                    color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
                }
                arr.push({
                    value: item,
                    itemStyle: itemStyle
                })
            })
            return arr
        }

        function contains(arr, dst) {
            var i = arr.length
            while ((i -= 1)) {
                if (arr[i] == dst) {
                    return i
                }
            }
            return false
        }

        var rankings = []
        var stationData = []
        var values = []
        datas.forEach(function (it, index) {
            rankings.push(it.ranking)
            stationData.push(it.station)
            values.push(it.value)
        })
        // 3、调用
        const myChart = echarts.init(chartDom4.value)
        myChart.setOption({
            // backgroundColor: '#000',
            title: {
                text: '行业分布占比',
                left: 'center',
                top: 5,
                textStyle: {
                    fontSize: 16 // 标题字体大小
                }
            },
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //     type: 'shadow',
            //     },
            // },
            grid: {
                left: '2%',
                right: '10%',
                bottom: '2%',
                top: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                splitLine: { show: false },
                axisLabel: { show: false },
                axisTick: { show: false },
                axisLine: { show: false }
            },
            yAxis: [
                {
                    type: 'category',
                    inverse: true,
                    axisLine: { show: false },
                    axisTick: { show: false },
                    data: stationData,
                    axisLabel: {
                        margin: 30,
                        fontSize: 14,
                        align: 'left',
                        padding: [3, 0, 0, 0],
                        color: '#000',
                        rich: {
                            nt1: {
                                color: '#fff',
                                backgroundColor: attackSourcesColor1[0],
                                width: 16,
                                height: 16,
                                fontSize: 10,
                                align: 'center',
                                borderRadius: 50,
                                // lineHeight: '5',
                                padding: [0, 0, 0, 0]
                            },
                            nt2: {
                                color: '#fff',
                                backgroundColor: attackSourcesColor1[1],
                                width: 16,
                                height: 16,
                                fontSize: 10,
                                align: 'center',
                                borderRadius: 50,
                                padding: [2, 0, 0, 0]
                            },
                            nt3: {
                                color: '#fff',
                                backgroundColor: attackSourcesColor1[2],
                                width: 16,
                                height: 16,
                                fontSize: 10,
                                align: 'center',
                                borderRadius: 50,
                                padding: [2, 0, 0, 0]
                            },
                            nt: {
                                color: '#fff',
                                backgroundColor: attackSourcesColor1[3],
                                width: 16,
                                height: 16,
                                fontSize: 10,
                                align: 'center',
                                borderRadius: 50,
                                padding: [2, 0, 0, 0]
                            }
                        },
                        formatter: function (value, index) {
                            index = contains(stationData, value) + 1
                            if (index - 1 < 3) {
                                return ['{nt' + index + '|' + index + '}'].join('\n')
                            } else {
                                return ['{nt|' + index + '}'].join('\n')
                            }
                        }
                    }
                },
                {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#666',
                            fontSize: '12'
                        }
                    },
                    data: dataFormat(values)
                }
            ],
            dataZoom: [
                {
                    type: 'slider',
                    realtime: true, // 拖动时，是否实时更新系列的视图
                    startValue: 0,
                    endValue: 5,
                    width: 5,
                    height: '90%',
                    top: '5%',
                    right: 0,
                    brushSelect: false,
                    yAxisIndex: [0, 1], // 控制y轴滚动
                    fillerColor: '#0093ff', // 滚动条颜色
                    borderColor: 'rgba(17, 100, 210, 0.12)',
                    backgroundColor: '#cfcfcf', //两边未选中的滑动条区域的颜色
                    handleSize: 0, // 两边手柄尺寸
                    showDataShadow: false, //是否显示数据阴影 默认auto
                    showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                    zoomLock: true,
                    moveHandleStyle: {
                        opacity: 0
                    }
                },
                {
                    type: 'inside',
                    width: 0,
                    startValue: 0,
                    endValue: 10,
                    minValueSpan: 10,
                    maxValueSpan: 20,
                    yAxisIndex: [0],
                    zoomOnMouseWheel: false, // 关闭滚轮缩放
                    moveOnMouseWheel: true, // 开启滚轮平移
                    moveOnMouseMove: false // 鼠标移动能触发数据窗口平移
                }
            ],
            series: [
                {
                    zlevel: 1,
                    type: 'bar',
                    barWidth: 20,
                    data: dataFormat(values),
                    align: 'center',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 10
                        }
                    },
                    //条状中的样式
                    label: {
                        show: true,
                        fontSize: 8,
                        color: '#fff', //条装中字体颜色
                        textBorderWidth: 2,
                        // padding: [-30, 0, 2, 0],
                        padding: [0, 0, 2, 0],
                        position: 'insideLeft',
                        formatter: (data) => {
                            return `{labelName|${data.name}}`
                        },
                        rich: {
                            labelName: {
                                color: 'black',
                                align: 'left',
                                padding: [2, 0, 0, 0]
                            }
                        }
                    }
                }
            ]
        })
    }

    const valueToPass = ref('')
    // 省
    const init5 = (params) => {
        const myChart = echarts.init(chartDom5.value)
        myChart.setOption({
            title: {
                text: '省分布占比',
                left: 'center',
                top: 5,
                textStyle: {
                    fontSize: 16 // 标题字体大小
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return `${params.name}:${params.value}      ${params.percent}%`
                }
            },
            series: [{
                name: '省占比',
                type: 'pie',
                radius: '40%', // 饼图大小
                center: ['50%', '50%'],
                minAngle: 10, // 占比特别小
                label: {
                    formatter: '{b}:{d}%' // 显示百分比
                },
                data: params.datas || noData,
                // 鼠标悬浮阴影
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                    }
                }
            }]
        })

        myChart.on('click', (params) => {
            valueToPass.value = calculateValue(params.name)
        })

        function calculateValue(params) {
            return params
        }
    }

    // 市
    const init6 = (params) => {
        const myChart = echarts.init(chartDom6.value)
        myChart.setOption({
            title: {
                text: `${valueToPass.value}市分布占比`,
                left: 'center',
                top: 5,
                textStyle: {
                    fontSize: 16 // 标题字体大小
                }
            },
            tooltip: {
                trigger: 'item'
            },
            xAxis: {
                type: 'category',
                // data: ['战队1', '战队2', '战队3', '战队4', '战队5', '战队6', '战队7']
                data: params.names
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: params.quantities,
                // data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                barWidth: '30%' // 柱子宽度
            }]
        })
    }

    function init7(params) {
        const myChart = echarts.init(chartDom7.value)

        myChart.setOption({
            title: {
                text: '工商信息同步占比',
                left: 'center',
                top: 5,
                textStyle: {
                    fontSize: 16 // 标题字体大小
                }
            },
            legend: {
                orient: 'vertical',
                right: '10%',
                top: 30
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return `${params.name}:${params.value}      ${params.percent}%`
                }
            },
            series: [{
                name: '工商信息同步占比',
                type: 'pie',
                radius: '45%', // 饼图大小
                center: ['50%', '55%'],
                minAngle: 10, // 占比特别小
                label: {
                    formatter: '{b}:\n{d}%' // 显示百分比
                },
                data: params.datas || noData,
                // 鼠标悬浮阴影
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        })
    }

    function clear() {
        // chartDom1.value = null;
        // chartDom2.value = null;
        // chartDom3.value = null;
        // chartDom4.value = null;
        // chartDom5.value = null;
        // chartDom6.value = null;
        valueToPass.value = ''
    }

    return {
        chartDom1,
        chartDom2,
        chartDom3,
        chartDom4,
        chartDom5,
        chartDom6,
        chartDom7,
        valueToPass,
        clear,
        init1,
        init2,
        init3,
        init4,
        init5,
        init6,
        init7
    }
}
